<script setup lang='ts'>
import { ArrowRight } from '@element-plus/icons-vue'
import { ref,onMounted,watch} from 'vue'
import type { TagProps } from 'element-plus'
import { useRoute,useRouter } from 'vue-router';

let Dynamic_button=ref<any>('Game')
let router_title=ref<any>('')
let routers =useRoute()
let Route_jump=useRouter()

let rueterlist =ref([])
onMounted(()=>{
    init()
})



let init  =()=>{
    routers.matched.map(item=>{


        if (item.name!='login') {

            let info= rueterlist.value.find((tiem:any)=>tiem.path==item.path)
            if (!info) {
                rueterlist.value.push(item)
            }
        }



    })

}

interface TagsItem {
    name: string
    type: TagProps['type']
}
watch(routers,()=>{
    init()
    Dynamic_button.value=routers.name
    router_title.value=routers.meta.title


})
let skip_router=(path:string)=>{
    Route_jump.replace(path)

}

</script>
<template>

    <el-card >
        <div class="card-header">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item> 首页</el-breadcrumb-item>
                <el-breadcrumb-item > {{ router_title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </el-card>
    <div class='taba-boutt'>
        <el-button
            v-for="item in rueterlist" @click="skip_router(item.path)"
            :type="item.name==Dynamic_button?'primary':''"
            plain>{{ item.meta.title }}</el-button>
    </div>
</template>
<style scoped>
.taba-boutt{
    background-color:#FFFFFFFF;
    white:70%;
    margin-top:10px;
    height:35px;

}

</style>